<!--
 * @Description: 个人中心
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-03 00:41:09
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-20 23:55:08
 * @FilePath: /lieshou-app/pages/personal_center.vue
-->

<template>
	<view class="content">
		<!-- 1 -->
		<z-paging ref="paging" >
			<view slot="top">
				<z-nav title="个人中心" :showBack="false" color="#333"></z-nav>
				<!-- 会员 -->
				<zUserCard :is-card='isCard' :card-ins='cardIns' @getUserName="getUserName" :user-info='userInfo'
					@getAvatar="getAvatar" :is-crown="isCrown"></zUserCard>
				<view class="gap-f" v-if="isCard"></view>
			</view>
			<template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<zcustom :status="refresherStatus" />
			</template>
			<!-- 菜单栏 -->
			<zMenuList :card-list='cardList' :is-crown='isCrown' :is-card='isCard' @getopen='getopen'></zMenuList>
		</z-paging>
	</view>
</template>

<script>
	import zMenuList from '@/components/z-menu-list.vue'
	import zUserCard from '@/components/z-user-card.vue'
	import zNav from '@/components/z-nav.vue'
	import zcustom from '@/components/z-custom-refresher.vue'
	// 封装云点播上传js-微信小程序
	import vodUploadIns from "@/helper/utils/class-vod-manager.js";
	export default {
		components: {
			zMenuList,
			zUserCard,
			zNav,
			zcustom
		},
		data() {
			return {
				// 是否开通会员
				isCard: false,
				isCrown: true,
				// 用户信息
				userInfo: {
					avatar: 'https://img.js.design/assets/img/5fe2c34f85f6379fa22d6652.png',
					nickname: '老五'
				},
				cardIns: {},
				// 会员模块
				cardList: []
			}
		},
		async onLoad() {
			console.log('111')
			this.initUserData()
			this.ininHeadBanner()
			let answer = await this.$utils.getStorage('answer')
			if (answer) {
				console.log('answer', answer)
				this.isCrown = false
			}
			// #ifdef MP-WEIXIN
			this.$utils.showShare('分享免费学习的平台给你~', '', '')
			// #endif
		

		},
		methods: {
			onRefresh() {
				this.ininHeadBanner()
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					// 1.5秒之后停止刷新动画
					this.$refs.paging.complete();
				}, 1000)

			},
			// 获取缓存中的用户信息
			async initUserData() {
				this.userInfo = await this.$utils.getStorage('userInfo')
				if (this.userInfo&&this.userInfo.rights) {
					console.log('this.userInfo.rights===',this.userInfo.rights)
					if (this.userInfo.rights.length > 0) {
						this.isCard = true
						this.cardIns = this.userInfo.rights.filter(obj => obj.name.includes('会员'))
					}
				}
				// 输出日志
				this.$utils.showLog('个人中心获取缓存数据', this.userInfo)
			},
			// 个人中心-banner
			ininHeadBanner() {
				this.$apis.getPersonalBanner({}).then((res) => {
					if (res.list && res.list.length > 0) {
						console.log('====', this.userInfo)
						this.cardList = res.list
					}

				}).catch(() => {

				})
			},
			// 二级页面
			getopen(type) {
				if(type==='xk'){
					uni.navigateTo({
						url:"/pages/course_selection"
					})
				}else if(type==='xj'){
					uni.navigateTo({
						url:"/pages/my_academic"
					})
				}else{
					this.$utils.showToast('小助理正在撸代码，过几天再来看看吧~', 1000)
				}

			},
			// 微信小程序上传方法
			wechatChooseVideo: function() {
				const that = this;
				wx.chooseMedia({
					sourceType: ["album", "camera"],
					sizeType: ["original"],
					maxDuration: 60,
					success: async function(res) {
						console.log("res", res);
						// 微信小程序接入上传云点播获取url
						console.log(
							"微信小程序上传云点播获取到最终结果===>",
							await vodUploadIns.getUrl(res.tempFiles)
						);
					},
				});
			},
			// 选择头像
			async getAvatar(e) {
				let that = this;
				// // #ifdef MP-WEIXIN
				// // 	let files=[{
				// // 		fileType: "image",
				// // 		size: 148199,
				// // 		tempFilePath:e.detail.avatarUrl
				// // 	}]
				// // let data=	await vodUploadIns.getUrl(files[0])
				// // console.log('data',data)
				// uni.getFileSystemManager().readFile({
				// 	filePath: e.detail.avatarUrl, //选择图片返回的相对路径
				// 	encoding: 'base64', //编码格式
				// 	success: res => { //成功的回调
				// 		let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
				// 		that.userInfo.avatar = base64
				// 		// that.$utils.setStorage('logo',base64)
				// 		uni.setStorageSync('userInfo', that.userInfo);
				// 		// that.$forceUpdate()
				// 	},
				// 	fail: (e) => {
				// 		console.log("图片转换失败");
				// 	}
				// })
				// // #endif
				// #ifdef MP-WEIXIN

				wx.chooseMedia({
					sourceType: ["album", "camera"],
					sizeType: ["original"],
					maxDuration: 60,
					success: async function(res) {
						// 微信小程序接入上传云点播获取url
						uni.showLoading({
							title: '正在上传中～'
						});
						console.log('上传开始---')
						let vodUpload = await vodUploadIns.getUrl(res.tempFiles)

						// console.log(
						// 	"微信小程序上传云点播获取到最终结果===>",
						// 	vodUpload.videoUrl
						// );
						that.userInfo.avatar = vodUpload.videoUrl
						// that.$utils.setStorage('logo',base64)
						uni.setStorageSync('userInfo', that.userInfo);
						that.$apis.getMediaCreate({
							url:that.userInfo.avatar
							}).then((element) => {
								console.log('上传成功1---',element)
							that.$apis.saveUserInfo({
								nickname: that.userInfo.nickname,
								avatar: that.userInfo.avatar
							}).then((element) => {
									console.log('上传成功2---',element)
								uni.$uv.toast('上传成功～')
								uni.hideLoading();
							}).catch((e) => {
								console.log('上传失败---')
								// this.$utils.showToast('登录过期请稍后尝试！', 1000)
							})
						}).catch((e) => {
							// this.$utils.showToast('登录过期请稍后尝试！', 1000)
						})
						
					},
				});
				// #endif

			},
			// 昵称
			getUserName(e) {
				this.userInfo.nickname = e.detail.value
				this.$forceUpdate()
				// 修改头像
				this.$apis.saveUserInfo({
					nickname: this.userInfo.nickname,
					avatar: this.userInfo.avatar
				}).then((element) => {
					// 输出日志
					uni.$uv.toast('修改成功')
					this.$utils.showLog('获取修改后的用户信息', this.userInfo)
					this.$utils.setStorage('userInfo', this.userInfo)
				}).catch((e) => {
					// this.$utils.showToast('登录过期请稍后尝试！', 1000)
				})
			},

		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		// height: 100%;
		.gap-f {
			width: 100%;
			height: 15rpx;
			background-color: #fff;
		}
	}
</style>